<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分类页面价格排序</title>
		<script src="bootstrap-3.3.5/js/jquery-3.1.1.js"></script>
		<script src="bootstrap-3.3.5/js/bootstrap.js"></script>		
		<link href="bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/sg_index.css" /><!--注意顺序很重要，必须先引用jquery.min.js文件，然后再引用botstrap的js-->
		<link rel="stylesheet" type="text/css" href="css/shopList.css" />	
	</head>
	<body>
		
	<nav class="top"><!--<nav>标签表示明确意义的导航组-->
			<span class="pull-left"><!--区别：<span>是内联元素，可以嵌套在同一行，<div>是块级元素，需要另起一行-->
				<span><span class="glyphicon glyphicon-fire redColor"></span> 喵，欢迎来时光购物城</span>
				<a href="login.html">请登录</a>
				<a href="register.html">免费注册</a>
			</span>			
			<span class="pull-right">
				<a href="sg_index.html"><span class="glyphicon glyphicon-home redColor"></span> 首页</a>
				<a href="mobile.html">手机端</a>
				<a href="#"><span class="glyphicon glyphicon-user blackColor"></span> 个人中心</a><!--在<a>链接里面嵌套标签<span>-->
				<a href="shopCart.html"><span class="glyphicon glyphicon-shopping-cart redColor"></span>  购物车</a>
			</span>
	</nav>
	<!--	悬浮搜索框-->
	<div class="bor_search">
		<img src="img/logobig1.png">
			<div class="search">
				<input type="text" name="keyword" placeholder="请输入搜索关键字" />
				<button class="search-button" type="submit">搜索</button>
			</div>		
	</div>
		
		<div class="categorySortBar">
			<div class="categoryTable">
				<table class="table1">
				<tbody>
					<tr>
						<td class="mr"><a href="#">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#">价格<span class="glyphicon glyphicon-arrow-down"></span></a></td>
					</tr>
				</tbody>
			</table>
				<table class="table2">
				<tbody>
					<tr>
						<td><input type="text" placeholder="请输入" class="price_begin"/></td>
						<td><span class="grayColumn priceMiddleColumn">-</span></td>
						<td><input type="text" placeholder="请输入" class="price_end"/></td>
					</tr>
				</tbody>
			</table>
			</div>
		</div>
		
	<div class="product_all">
		<div class="product_simple">
			<div class="product_img"><img style="width: 225px;height: 190px;" src="img/phone1.jpg" /></div>
			<div class="product_price">$1499.00</div>
			<div class="product_link">华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</div>
			<div class="product_store"><a href="#">时光城专卖店</a></div>
			<div class="product_talk">
				<span>月成交订单数：<strong>100 </strong>件</span><span> | 评价 90</span>
			</div>
		</div>
		<div class="product_simple">
			<div class="product_img"><img style="width: 225px;height: 190px;" src="img/phone1.jpg" /></div>
			<div class="product_price">$1499.00</div>
			<div class="product_link">华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</div>
			<div class="product_store"><a href="#">时光城专卖店</a></div>
			<div class="product_talk">
				<span>月成交订单数：<strong>100 </strong>件</span><span> | 评价 90</span>
			</div>
		</div>
		<div class="product_simple">
			<div class="product_img"><img style="width: 225px;height: 190px;" src="img/phone1.jpg" /></div>
			<div class="product_price">$1499.00</div>
			<div class="product_link">华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</div>
			<div class="product_store"><a href="#">时光城专卖店</a></div>
			<div class="product_talk">
				<span>月成交订单数：<strong>100 </strong>件</span><span> | 评价 90</span>
			</div>
		</div>
		<div class="product_simple">
			<div class="product_img"><img style="width: 225px;height: 190px;" src="img/phone1.jpg" /></div>
			<div class="product_price">$1499.00</div>
			<div class="product_link">华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</div>
			<div class="product_store"><a href="#">时光城专卖店</a></div>
			<div class="product_talk">
				<span>月成交订单数：<strong>100 </strong>件</span><span> | 评价 90</span>
			</div>
		</div>
		<div class="product_simple">
			<div class="product_img"><img style="width: 225px;height: 190px;" src="img/phone1.jpg" /></div>
			<div class="product_price">$1499.00</div>
			<div class="product_link">华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</div>
			<div class="product_store"><a href="#">时光城专卖店</a></div>
			<div class="product_talk">
				<span>月成交订单数：<strong>100 </strong>件</span><span> | 评价 90</span>
			</div>
		</div>
			
		<div class="product_simple">
			<div class="product_img"><img style="width: 225px;height: 190px;" src="img/phone1.jpg" /></div>
			<div class="product_price">$1499.00</div>
			<div class="product_link">华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</div>
			<div class="product_store"><a href="#">时光城专卖店</a></div>
			<div class="product_talk">
				<span>月成交订单数：<strong>100 </strong>件</span><span> | 评价 90</span>
			</div>
		</div>		
	</div>
	
	<div class="footer-end">
			<div class="footer-end-up">
				<a href="#">关于时光</a>
				<a href="#">帮助中心</a>
				<a href="#">开放平台</a>
				<a href="#">诚聘英才</a>
				<a href="#">联系我们</a>
				<a href="#">法律申明</a>
				<a href="#">知识产权</a>
				<a href="#" v>廉政举报</a>
			</div>
			<div class="footer-end-down">
				<a href="#">阿里巴巴集团</a><span class="flash">|</span>
				<a href="#">淘宝网</a><span class="flash">|</span>
				<a href="#">天猫</a><span class="flash">|</span>
				<a href="#">聚划算</a><span class="flash">|</span>
				<a href="#">全球速卖通</a><span class="flash">|</span>
				<a href="#">阿里旅行·去啊</a><span class="flash">|</span>
				<a href="#">阿里云计算 </a><span class="flash">|</span>
				<a href="#">阿里妈妈</a><span class="flash">|</span>
				<a href="#">万网 </a><span class="flash">|</span>
				<a href="#">高德</a><span class="flash">|</span>
				<a href="#">优步</a><span class="flash">|</span>
				<a href="#">虾米</a><span class="flash">|</span>
				<a href="#">钉钉</a><span class="flash">|</span>
				<a href="#">优视</a><span class="flash">|</span>
				<a href="#">网易</a><span class="flash">|</span>
				<a href="#">支付宝</a><span class="flash">|</span>			
			</div>
            <div class="license">
				<span>增值电信业务经营许可证： 浙BXXXX</span>
				<span>网络文化经营许可证：XXXX号</span>
				<span>互联网医疗保健信息服务XXXX </span><br>
				<span>互联网药品信息服务资质证书编号：XXXX</span><br>
			    <div class="copyRightYear">© 2017-2018 SG.COM 版权所有</div>
		    </div>
	</div>

</body>
</html>
